<template>
  <div class="big_box h-100 clearfix" id="userBig">
    <!-- ping -->
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <!-- 详情 -->
    <job-details :jobDetails="jobDetails" @jobDetailsOff="details($event)"></job-details>
    <div class="tree-box" style="height: 100%" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 统计面板 -->
          <stas-panel :refresh="refresh" @refreshOff="panelOff($event)"></stas-panel>
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
            <!-- :disabled="quanxianBtns.btn4"  -->
            <el-form-item>
              <el-button type="success" size="medium" :disabled="quanxianBtns.btn4" class="btnSizeStyle" icon="el-icon-plus" @click="addFault()">录入故障</el-button>
            </el-form-item>
            <el-form-item label="设备类型:">
              <!-- <el-select
              v-model="searchCriteria.typeVal"
              class="inputWidth"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in zicanOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>-->
              <el-cascader class="inputWidth" v-model.trim="searchCriteria.typeVal" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable></el-cascader>
            </el-form-item>
            <!-- <el-form-item label="故障类型:">
            <el-select v-model="searchCriteria.isGZ" class="inputWidth" clearable placeholder="请选择">
              <el-option label="未生成" value="0"></el-option>
              <el-option label="已生成" value="1"></el-option>
            </el-select>
          </el-form-item>-->
            <!-- <el-form-item label="报障时间:">
              <el-date-picker
                v-model="searchCriteria.dataTime"
                :picker-options="pickerBeginDateBefore"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item> -->
            <el-form-item label="创建人:">
              <el-select v-model="searchCriteria.founder" class="inputWidth" @focus="getFounder" clearable placeholder="请选择">
                <el-option v-for="item in founderOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格 -->
          <el-table
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
            :cell-class-name="addClass"
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            border
            stripe
            highlight-current-row
            clearSelection
            @sort-change="sortthiscolumn"
            v-loading="tableLoad"
            :header-row-style="{ height: '28px' }"
            @select="isCheck"
            @select-all="isCheckAll"
            @row-dblclick="rowClick"
          >
            <el-table-column type="selection" width="45" :selectable="checkboxT"></el-table-column>
            <!-- 序号 -->
            <el-table-column type="index" min-width="50" label="序号" align="center"></el-table-column>
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column prop="zcmc" label="设备名称" sortable :show-overflow-tooltip="true" min-width="200">
              <template slot-scope="scope">
                <!-- <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#el-icon-myfault1" style="font-size: 50px" />
                </svg> -->
                <span v-html="getzcmc(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column prop="zclxmc" label="设备类型" min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-html="getsblx(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column label="安装地址" min-width="250" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.zcsfmc + scope.row.zccsmc + scope.row.zcqxmc + scope.row.zcjdmc + scope.row.xxdz }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="设备IP" min-width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.ip }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="wtlxmc" label="故障数" min-width="100">
              <template slot-scope="scope">
                <span class="haveLinks" @click="gzXiangqing(scope.row)">{{ scope.row.counts }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="zclxmc" label="品牌" min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.ppmc }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="zclxmc" label="型号" min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.xh }}</span>
              </template>
            </el-table-column>
            <!-- 0运维主机 1卡口 2电警 -->
            <el-table-column label="宿主" min-width="98">
              <template slot-scope="scope">
                <span v-for="(item, index) in scope.row.szs" :key="index">
                  <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                    <div slot="content">{{ item.SZMC }}</div>
                    <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                      <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                    </svg>
                  </el-tooltip>
                  <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                    <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
                  </svg>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="生成人" sortable="custom" min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.createBy }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tjsj" label="添加时间" sortable="custom" min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.tjsj | dateFormat }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="wtlx" label="工单状态" min-width="120">
            <template slot-scope="scope">
              <span
                :class="[`type${Number(scope.row.gdzt)}`,'type']"
              >{{type[Number(scope.row.gdzt)]}}</span>
            </template>
          </el-table-column>-->
            <el-table-column fixed="right" label="操作" min-width="200" align="right">
              <template slot-scope="scope">
                <div class="operations">
                  <!-- 不可以点击加上 noAction这个类名 -->
                  <!-- <el-button type="text" @click="handleClick(scope.row)">编辑</el-button> -->
                  <el-button type="text" :disabled="scope.row.toCount < 1" @click="goWorkOrder(scope.row)">切换到工单</el-button>
                  <span class="operation"></span>
                  <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" class="Btn_nan" @click="yuanChenKZ(scope.row)">远程控制</el-button>
                  <span class="operation"></span>
                  <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true">ping</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <el-button type="primary" class="btnSizeStyle" v-if="quanxianBtns.btn3" :disabled="this.gouXuanList.length > 0 ? false : true" @click="dialogVisible_generate = true">生成工单</el-button>
              <!-- <span style="padding-left: 15px; color: #6d7278" v-for="(item, index) in listIcon" :key="index">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use :xlink:href="`#el-icon-my${item.icon}`" />
                </svg>
                {{ item.text }}
              </span> -->
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 提示窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="576px">
      <span style="color: #5a5e66" v-html="tips"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteClose" style="padding: 9px 15px">取 消</el-button>
        <el-button type="primary" :disabled="this.deleteID.length !== 0 ? false : true" @click="piLianDelete" style="padding: 9px 15px" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 录入工单 抽屉 -->
    <!-- <el-drawer title="录入故障" :visible.sync="drawer" :with-header="false" :wrapperClosable="false">
      <div class="addUer_title">
        <span>{{ title }}</span>
        <i class="el-icon-close addUer_icon" @click="offDrawer('faultValidateForm')"></i>
      </div>
      <el-form
        :model="faultValidateForm"
        :rules="rules"
        ref="faultValidateForm"
        label-width="130px"
      >
        <el-row>
          <el-col :span="23">
            <el-form-item label="设备:" prop="fault">
              <el-autocomplete
                style="width: 100%;"
                clearable
                :disabled="biLR"
                @clear="clearAll"
                v-model.trim="faultValidateForm.fault"
                :fetch-suggestions="querySearch"
                @select="handleSelect"
                :trigger-on-focus="false"
                placeholder="输入设备名称/设备IP"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="设备类型:" v-if="searchSucces">
              <span>{{faultValidateForm.searchSuccesData.faultTypeVal}}</span>
            </el-form-item>
            <el-form-item label="辖区:" v-if="searchSucces">
              <span>{{faultValidateForm.searchSuccesData.JurisdictionVal}}</span>
            </el-form-item>
            <el-form-item label="IP地址:" v-if="searchSucces">
              <span>{{faultValidateForm.searchSuccesData.IPadressVal}}</span>
            </el-form-item>
            <el-form-item label="端口:" v-if="searchSucces">
              <span>{{faultValidateForm.searchSuccesData.portVal}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="故障类型:" prop="faultType">
              <el-cascader
                v-model.trim="faultValidateForm.faultType"
                :options="guzLianJ"
                :props="{ checkStrictly: true }"
                filterable
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="故障描述:" prop="faultDesc">
              <el-input
                type="textarea"
                :maxlength="255"
                resize="none"
                show-word-limit
                v-model.trim="faultValidateForm.faultDesc"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="forms_fooer">
          <el-button class="users_btn" @click="offDrawer('faultValidateForm')">取消</el-button>
          <el-button
            type="primary"
            class="users_btn"
            @click="submitForm(title, 'faultValidateForm')"
            v-preventReClick
          >确定</el-button>
        </div>
      </el-form>
    </el-drawer>-->
    <el-dialog :visible.sync="dialogBox" width="50%" title="录入故障" :close-on-click-modal="false">
      <el-form :inline="true" :model="addShebei" class="form-inline">
        <!-- 搜索输入框 -->
        <el-form-item>
          <el-input placeholder="输入设备名称或设备IP" v-model.trim="addShebei.ss" clearable class="selectItem3"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDevice" class="btnSizeStyle">搜 索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        max-height="360"
        stripe
        border
        :data="addSheBeiName"
        highlight-current-row
        @row-click="addRowClick_addFault"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column label="设备名称" prop="zcmc" show-overflow-tooltip sortable min-width="200">
          <template slot-scope="scope">
            <el-radio-group v-model="dispatchOptions" @click.native.stop @change="getTemplateRow_addFault(scope.row)" class="lineH0">
              <el-radio :label="scope.row.id">
                <span style="display: inline-block">{{ scope.row.zcmc }}</span>
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="zclxmc" min-width="150"></el-table-column>
        <el-table-column label="设备序列码" prop="sbxlh" min-width="150"></el-table-column>
        <el-table-column label="设备IP" prop="ip" min-width="120"></el-table-column>
        <el-table-column label="端口" prop="gldk" min-width="50"></el-table-column>
      </el-table>
      <span slot="footer">
        <el-row class="page-row addFaultPageRow">
          <el-col :span="12">
            <el-pagination background layout="prev, pager, next, total" :current-page="addCurrentPage" @current-change="addHandleCurrentChange" :total="addTotal"></el-pagination>
            <!-- :hide-on-single-page="paginationValue" -->
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="addFalutNext()" :disabled="addSheBeiName2.length > 0 ? false : true" size="small" class="btnSizeStyle">下一步</el-button>
          </el-col>
        </el-row>
        <div class="footerPagination"></div>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogBox2" :close-on-click-modal="false" width="45.8%" @close="offgou">
      <span slot="title" class="dialogTitle">{{ title }}</span>
      <el-form :model="faultValidateForm" :rules="rules" class="dialogBox_next" ref="faultValidateForm" label-width="130px">
        <el-row>
          <el-col :span="23">
            <el-form-item label="设备名称:" class="formbottm">
              <span>{{ faultValidateForm.searchSuccesData.faultName }}</span>
            </el-form-item>
            <el-form-item label="设备类型:" class="formbottm">
              <span>{{ faultValidateForm.searchSuccesData.faultTypeVal }}</span>
            </el-form-item>
            <el-form-item label="辖区:" class="formbottm">
              <span>{{ faultValidateForm.searchSuccesData.JurisdictionVal }}</span>
            </el-form-item>
            <el-form-item label="IP地址:" class="formbottm">
              <span>{{ faultValidateForm.searchSuccesData.IPadressVal }}</span>
            </el-form-item>
            <el-form-item label="端口:" class="formbottm">
              <span>{{ faultValidateForm.searchSuccesData.portVal }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="故障类型:" prop="faultType">
              <el-cascader v-model.trim="faultValidateForm.faultType" :options="guzLianJ" clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="故障描述:" prop="faultDesc">
              <el-input type="textarea" :maxlength="255" :rows="4" resize="none" show-word-limit v-model.trim="faultValidateForm.faultDesc" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="addFalutPre()" size="small" class="btnSizeStyle" v-show="biLR">上一步</el-button>
        <el-button type="primary" @click="submitForm(title, 'faultValidateForm')" size="small" v-preventReClick class="btnSizeStyle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 故障生成工单 -->
    <el-dialog :visible.sync="dialogWorkOrder" class="workOrderClass" width="900px">
      <!-- // 这里的插槽会替换title显示的内容 -->
      <div slot="title" class="header-title">
        <span class="title">故障生成工单</span>
      </div>
      <el-form :model="workOrderOptions" :rules="rules" :close="faultClose" ref="workOrderOptions" class="demo-ruleForm" label-position="left">
        <!-- label-width="80px" -->
        <el-form-item label="工单等级:" prop="workOrderLevel" style="padding: 0px; margin: 0px">
          <el-radio-group v-model="workOrderOptions.workOrderLevel">
            <el-radio :label="1">一般</el-radio>
            <el-radio :label="2">紧急</el-radio>
            <el-radio :label="3">加急</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item>选择处理工单的运维人员</el-form-item> -->
      </el-form>
      <el-form :model="workOrderOptions" inline :rules="rules" :close="faultClose" ref="workOrderOptions" class="demo-ruleForm" label-position="left">
        <el-form-item label="机构:" class="organs" style="margin-bottom: 10px">
          <el-select v-model="workOrderOptions.organsVal" :no-data-text="tiText2" filterable clearable placeholder="请选择/搜索">
            <el-option v-for="item in organs" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <!-- <el-input placeholder="搜索运维人员名称" v-model.trim="workOrderOptions.userName">
            <el-button slot="append" icon="el-icon-search" @click="ssGD"></el-button>
          </el-input>-->
        </el-form-item>
        <el-form-item style="margin-bottom: 10px">
          <el-input v-model.trim="workOrderOptions.userName" prefix-icon="el-icon-search" clearable placeholder="搜索运维人员名称"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px">
          <el-button type="primary" class="btnSizeStyle" size="medium" @click="ssGD">查询</el-button>
        </el-form-item>
      </el-form>
      <el-alert title="工单只能指派给一线工程师、二线工程师。" :closable="false" type="warning" show-icon></el-alert>
      <el-table
        ref="pilian"
        :data="gridData"
        border
        :header-cell-style="{ backgroundColor: '#ECF3FC', borderBottom: '1px solid #CEE1F7' }"
        height="283"
        @row-click="addRowClick"
        v-loading="subTableLoad"
      >
        <!-- <el-table-column type="selection" width="45"></el-table-column> -->
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column label="姓名" width="200" style="position: relative">
          <template slot-scope="scope">
            <el-radio-group v-model="templateRadio" @change.native.stop @change="getTemplateRow(scope.$index, scope.row)" class="lineH0">
              <el-radio :label="scope.row.id">
                <span style="display: inline-block">{{ scope.row.zsxm + `(${scope.row.lxdh})` }}</span>
              </el-radio>
            </el-radio-group>
            <!-- <el-radio :label="scope.$index" v-model="dispatchOptions.templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)"></el-radio> -->
          </template>
        </el-table-column>
        <!-- <el-table-column width="30">
              <template slot-scope="scope">
                <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)"></el-radio>
              </template>
            </el-table-column>
            <el-table-column property="zsxm" label="姓名" min-width="250">
              <template slot-scope="scope">{{ scope.row.zsxm + `(${scope.row.lxdh})` }}</template>
        </el-table-column>-->
        <el-table-column property="zhdf" label="综合评分" min-width="120">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.zhdf" disabled show-score text-color="#ff9900"></el-rate>
          </template>
        </el-table-column>
        <el-table-column property="ssjs" :show-overflow-tooltip="true" label="角色" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.ssjs }}</span>
          </template>
        </el-table-column>
        <el-table-column property="zwlist" :show-overflow-tooltip="true" label="职务" min-width="120">
          <template slot-scope="scope">
            <span>{{ getLxName(scope.row.zwlist) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="gdsl" label="接单数" min-width="70"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <span slot="footer">
        <el-row class="page-row borderNone">
          <el-col :span="12">
            <el-pagination
              background
              layout="prev, pager, next, total"
              @current-change="addHandleCurrentChange2"
              :current-page.sync="addCurrentPage2"
              :total="addTotal2"
              :hide-on-single-page="paginationValue2"
            ></el-pagination>
          </el-col>
          <el-col :span="12">
            <el-button @click="faultClose" class="btnSizeStyle">取 消</el-button>
            <el-button class="btnSizeStyle" :loading="generatedLoad" type="primary" :disabled="paidUserId !== '' && this.shengcgd.length !== 0 ? false : true" @click="addpaidan" v-preventReClick
              >提 交</el-button
            >
          </el-col>
        </el-row>
        <div></div>
      </span>
    </el-dialog>
    <!-- 故障问题详情 -->
    <countList :countListData="countListData"></countList>
    <el-dialog title="提示" :visible.sync="dialogVisible_generate" width="30%" :before-close="handleClose">
      <span>确定生成工单?</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisible_generate = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="generateWorkOrder()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import StasPanel from '../statsPanel'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import jobDetails from '@/components/jobDetails/index.vue'
import { getUrl, setUrl } from '@/utils/getUrl.js'
import { yeWu, ziC, pinT } from '@/utils/allUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
// import { startLoading, endLoading } from '@/utils/loading.js'
import { twoLevelH } from '@/assets/js/calcHeight'
import countList from '@/components/RunTesting/countList.vue'
export default {
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - twoLevelH,
        pb: twoLevelH,
      }
    },
  },
  data() {
    return {
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      refresh: false, // 刷新面板
      jobDetails: {
        gdbh: '',
        show: false,
        activeName: '',
      }, // 关闭详情
      treesBox: {
        url: 'ZI_CHAN',
        GZKZ: false,
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      title: '',
      searchCriteria: {
        typeVal: '',
        isGZVal: '',
        dataTime: '',
        gdType: '',
        namer: '',
        founder: '', // 创建人
      },
      isGZ: [],
      guzLianJ: [], // 故障连级选择
      tableData: [],
      zicanOptions: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      tips: '',
      // drawer: false,
      dialogBox: false,
      dialogBox2: false,
      addShebei: {
        ss: '',
      },
      paginationValue: false, // 数据为一条时隐藏
      paginationValue2: false, // 生成工单数据为一条时隐藏
      addTotal: 0,
      addTotal2: 0, // 生成工单
      biLR: true,
      addCurrentPage: 1,
      addCurrentPage2: 1, // 生成工单
      addSheBeiName: [],
      dispatchOptions: '', // 添加故障界面选择资产
      addSheBeiName2: [],
      faultValidateForm: {
        faultType: '',
        faultDesc: '',
        searchSuccesData: {
          // 搜索成功
          faultName: '',
          faultTypeVal: '',
          JurisdictionVal: '',
          IPadressVal: '',
          portVal: '',
        },
      },
      rules: {
        faultType: [{ required: true, message: '请选择故障类型', trigger: 'change' }],
        faultDesc: [{ required: true, message: '请输入故障描述', trigger: 'blur' }],
        workOrderLevel: [{ required: true, message: '请至少选择一个工单等级', trigger: 'change' }],
      },
      // searchSucces: false,
      // 编辑录入判断
      dialogWorkOrder: false,
      workOrderOptions: {
        workOrderLevel: 1,
        organsVal: '',
        userName: '',
      },
      organs: [], // 机构
      gouXuanList: [], // 勾选的数据源
      shengcgd: [],
      deleteID: [], // 批量删除ID
      gridData: [], // 派单用户数据源
      // 获取派单用户
      paidUser: {
        jgId: '',
        zsxm: '',
      },
      // 派单员id
      paidUserId: '',
      templateRadio: '',
      restaurants: [],
      xiugaiId: '', // 修改id
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      xianQu: null, // 辖区搜索条件
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: false,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      tiText1: '暂无数据', // 故障类型提示
      tiText2: '暂无数据', // 机构提示
      listIcon: [
        { icon: 'fault1', text: '异常' },
        { icon: 'suzhu_0', text: '运维主机' },
        { icon: 'suzhu_1', text: '卡口' },
        { icon: 'suzhu_2', text: '电子警察' },
      ],
      subTableLoad: false, // 故障生成工单表格加载
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      countListData: {
        type: '设备',
        url: 'gz/selectById',
        xianqingID: '', // 详情ID
        contractDialogVisible: false,
        contractDetailList: [], // 故障详情
      },
      email: '',
      listQuery: {
        sortby: '',
        order: '',
      },
      founderOptions: [],
      dialogVisible_generate: false, // 是否生成工单
      generatedLoad: false, // 生成工单提示框确定按钮
      generatedTime: null,
      addFalutNextStatus: {
        currentPage: '',
        selected: '',
        selectedRow: [],
      }, // 保存下一步的状态
    }
  },
  watch: {
    generatedLoad(newVal, oldVal) {
      this.generatedTime = setTimeout(() => {
        if (this.generatedLoad) {
          this.generatedLoad = false
        }
      }, timeLoad)
    }, // 生成工单提示框确定按钮
    // tableLoad(newVal, oldVal) {
    //   this.tableTimer = setTimeout(() => {
    //     if (this.tableLoad) {
    //       this.tableLoad = false
    //       this.tableData = []
    //       this.tableMessage = tableMessageText
    //       this.total = 0
    //     }
    //   }, timeLoad)
    // },
  },
  components: { StasPanel, Ping, jobDetails, treesBox, countList },
  created() {
    this.jurisdictionBtn()
    // // 获取列表数据
    // this.getshuList()
    // 获取资产类型
    this.getzican()
    // 获取故障类型
    this.getguz()
    // 获取故障类型2
    this.getguzz()
    // 获取用户评分
    this.getYhPf()
    // 获取机构
    this.getMechanism()
    // 获取设备
    // this.getShebai()

    this.initList() // 获取列表
  },
  mounted() {
    // startLoading(document.getElementById('userBig'))
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        console.log(el, binding)
        // el为绑定的元素，binding为绑定给指令的对象
        let width = ''
        let height = ''
        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      },
    },
  },
  methods: {
    // 搜索设备
    searchDevice() {
      this.addCurrentPage = 1 // 重置页数为1
      this.dispatchOptions = '' // 重置radio选中样式
      this.addSheBeiName2 = [] // 重置选中为空
      this.searchShebei()
    },
    handleClose() {
      this.dialogVisible_generate = false
    },
    goWorkOrder(row) {
      // 切换到工单
      const tab = JSON.parse(getUrl('menus'))
      tab.forEach((item) => {
        if (item.qxmc === '业务中心') {
          item.children.forEach((item2) => {
            if (item2.qxfwlj === '/workOrderManage') {
              item2.sbid = row.id
              this.$emit('getSonMessage', item2)
              setUrl('workorder', 'workOrderList')
            }
          })
        }
      })
    },
    // 获取用户列表
    async getFounder() {
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`)
      switch (res.code) {
        case '0000':
          this.founderOptions = JSON.parse(JSON.stringify(res.data.list).replace(/zsxm/g, 'label').replace(/id/g, 'value'))
          break
        default:
          break
      }
    },
    getLxName(arr) {
      const list = []
      let html = ''
      if (arr) {
        arr.forEach((item) => {
          list.push(item.lx_MC)
        })
        html = list.join(',')
      }
      return html
    },
    checkboxT(row, index) {
      // 0 未生成 1已生成
      if (row.tatal > 0) {
        return true
      } else {
        return false
      }
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_GZGL_GZLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'gz:insertGuZhang') {
              this.quanxianBtns.btn1 = false // 故障新增
            } else if (item2.qxdm === 'gz:updateGuZhang') {
              this.quanxianBtns.btn2 = false // 故障修改
            } else if (item2.qxdm === 'gz:insertGD') {
              this.quanxianBtns.btn3 = true // 批量生成工单
            } else if (item2.qxdm === 'gz:insertGuZhang') {
              this.quanxianBtns.btn4 = true // 录入故障
            }
          })
        }
      })
    },
    // 表格加载
    loadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    getshuList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true // 表格加载中样式
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('sort', 'ASC')
      // params.append('order', 'id')
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      this.gouXuanList = []
      this.loadTable()
      this.tableLoad = true
      const { data: res } = await this.$http.post(`${yeWu}gz/selectGuZhangGroup`, params)
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取资产
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        this.$message({
          type: 'error',
          message: '设备类型' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    // async getShebai() {
    //   const user = JSON.parse(getUrl('userconter'))
    //   const params = new URLSearchParams()
    //   params.append('userId', user.id)
    //   const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
    //   const city = JSON.stringify(res.data.list)
    //   const newCity = city.replace(/zcmc/g, 'value')
    //   const cityList = newCity.replace(/id/g, 'address')
    //   const newCity2 = city.replace(/ip/g, 'value')
    //   const cityList2 = newCity2.replace(/id/g, 'address')
    //   this.restaurants = [...JSON.parse(cityList), ...JSON.parse(cityList2)]
    // },
    // 获取机构
    async getMechanism() {
      const params = new URLSearchParams()
      params.append('jglx', 4)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = []
      if (res.code === '0013') {
        this.tiText2 = res.message
        return (this.organs = [])
      } else {
        res.data.list.forEach((item, index) => {
          const k = {
            value: item.id,
            label: item.jgmc,
            children: [],
          }
          arr.push(k)
        })
        this.organs = arr
      }
    },
    async getguz() {
      const params = new URLSearchParams()
      const arr = []
      params.append('FLBISNULL', 0)
      const { data: res } = await this.$http.post(`${yeWu}wtgzzd/selectWenTiGuZhangZiDian`, params)
      if (res.code !== '0000') {
        this.isGZ = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.lbmc,
          }
          arr.push(k)
        })
        this.isGZ = arr
      }
    },
    async getguzz() {
      const { data: res } = await this.$http.post(`${yeWu}wtgzzd/selectChildren`)
      if (res.code !== '0000') {
        this.zicanOptions = []
        this.$message({
          type: 'error',
          message: '故障类型' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lbmc/g, 'label')
        this.guzLianJ = JSON.parse(cityList)
      }
    },
    // 勾选
    isCheck(e, v) {
      console.log(e)
      this.gouXuanList = e
    },
    // 全选
    isCheckAll(e, v) {
      this.gouXuanList = e
    },
    // 添加故障下一步
    addFalutNext() {
      this.dialogBox = false
      this.dialogBox2 = true
      this.faultValidateForm.searchSuccesData = {
        faultName: this.addSheBeiName2[0].zcmc,
        faultTypeVal: this.addSheBeiName2[0].zclxmc,
        JurisdictionVal: this.addSheBeiName2[0].sfmc + this.addSheBeiName2[0].csmc + this.addSheBeiName2[0].qxmc + this.addSheBeiName2[0].xzjdmc,
        IPadressVal: this.addSheBeiName2[0].ip || this.addSheBeiName2[0].value,
        portVal: this.addSheBeiName2[0].gldk,
      }
      this.addSheBeiName = [] // 内容设置为空
      this.addFalutNextStatus = {
        currentPage: this.addCurrentPage,
        selected: this.dispatchOptions,
        selectedRow: this.addSheBeiName2,
      }
    },
    // 添加故障上一步
    addFalutPre() {
      this.dialogBox2 = false
      this.searchShebei('pre')
      this.dialogBox = true
    },
    offgou() {
      this.dialogBox2 = false
      this.$refs.faultValidateForm.resetFields()
      this.dispatchOptions = ''
      this.addSheBeiName2 = []
      this.faultValidateForm = {
        faultType: '',
        faultDesc: '',
        searchSuccesData: {
          faultName: '',
          faultTypeVal: '',
          JurisdictionVal: '',
          IPadressVal: '',
          portVal: '',
        },
      }
    },
    // 录入故障
    addFault() {
      this.dialogBox = true
      this.addCurrentPage = 1 // 重置为1
      this.dispatchOptions = ''
      this.addSheBeiName = []
      this.addSheBeiName2 = []
      this.searchShebei()
      this.title = '录入故障'
    },
    // 录入/编辑故障
    addguz(title, scope) {
      if (scope) {
        console.log(scope)
        this.xiugaiId = scope.id
        this.faultValidateForm = {
          faultType: scope.gzlb,
          faultDesc: scope.gzms,
          searchSuccesData: {
            faultName: scope.zcmc,
            faultTypeVal: scope.zclxmc,
            JurisdictionVal: scope.zcsfmc + scope.zccsmc + scope.zcqxmc + scope.zcjdmc,
            IPadressVal: scope.ip,
            portVal: scope.gldk,
          },
        }
        this.dialogBox2 = true
        this.biLR = false
      } else {
        this.biLR = true
        this.dialogBox = true
        this.searchShebei()
      }
      this.title = title
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit(1, 10)
    },
    // 查询
    onSubmit() {
      this.tableLoad = true
      this.currentPage = 1 // 页码
      this.pageSize = 10 // 每页显示的条目数
      this.initList()
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 1) {
      //   return 'fontColor'
      // }
    },
    handleSizeChange(val) {
      // 切换每页显示
      this.currentPage = 1 // 页码
      this.pageSize = val
      this.initList()
    },
    handleCurrentChange(val) {
      this.tableLoad = true // 加载中样式
      this.currentPage = val
      this.initList()
    },
    delBtn() {
      this.gouXuanList.forEach((item) => {
        if (item.sfscgd !== 0) {
          this.$message({
            type: 'error',
            message: '您的选项中已有生成工单，不可删除！',
            center: true,
          })
        } else {
          this.deleteID.push(item.id)
        }
      })
      this.tips = `<svg
          class="iconfont"
          aria-hidden="true"
          style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        >
          <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        </svg>当前故障对应的问题将同步删除，数据不可恢复，请谨慎操作！`
      this.dialogVisible = true
    },
    // 获取用户列表及评分
    async getYhPf() {
      this.subTableLoad = true
      const { jgId, zsxm } = this.paidUser
      const params = new URLSearchParams()
      params.append('ZZJG_ID', jgId)
      params.append('ZSXM', zsxm)
      params.append('M_', this.addCurrentPage2)
      params.append('N_', 10)
      params.append('TYPE', 1)
      const { data: res } = await this.$http.post(`${yeWu}gdjs/YongHuList`, params)
      this.subTableLoad = false
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const js = Object.values(item.ssjs).join(',')
            item.ssjs = js
          })
          this.gridData = res.data.list
          this.addTotal2 = res.data.countList - ''
          return
        case '0014':
          return
        case '0013':
          return (this.gridData = [])
        default:
          this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
          return (this.gridData = [])
      }
      // if (res.code === '0014') {
      //   return
      // } else if (res.code !== '0000') {
      //   this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      //   return (this.gridData = [])
      // }
    },
    async generateWorkOrder() {
      // this.$confirm('确定生成工单?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // })
      //   .then(() => {
      //     // 确定
      //   })
      //   .catch(() => {
      //     // 取消
      //   })
      this.gouXuanList.forEach((item) => {
        this.shengcgd.push(item.id)
      })
      this.dialogVisible_generate = false // 取消确定提示框
      this.dialogWorkOrder = true
      // 查询条件置空
      Object.keys(this.paidUser).forEach((key) => (this.paidUser[key] = ''))
      this.getYhPf()
      // this.gouXuanList.forEach((item) => {
      //   if (item.sfscgd !== 0) {
      //     this.$message({
      //       type: 'error',
      //       message: '您的选项中已有生成工单，不可重复生成！',
      //       center: true,
      //     })
      //   } else {
      //     this.shengcgd.push(item.id)
      //     this.dialogWorkOrder = true
      //     // 查询条件置空
      //     Object.keys(this.paidUser).forEach((key) => (this.paidUser[key] = ''))
      //     this.getYhPf()
      //   }
      // })
    },
    // 关闭录入
    // offDrawer(faultValidateForm) {
    //   this.$refs.faultValidateForm.resetFields()
    //   this.drawer = false
    //   this.biLR = false
    //   this.searchSucces = false
    //   this.faultValidateForm = {
    //     fault: '',
    //     faultType: '',
    //     faultDesc: '',
    //     searchSuccesData: {
    //       // 搜索成功
    //       faultTypeVal: '',
    //       JurisdictionVal: '',
    //       IPadressVal: '',
    //       portVal: ''
    //     }
    //   }
    // },
    // 关闭生成工单
    faultClose() {
      this.dialogWorkOrder = false
      this.templateRadio = ''
      this.paidUserId = ''
      this.workOrderOptions = {
        workOrderLevel: 1,
        organsVal: '',
        userName: '',
      }
      this.shengcgd = []
    },
    // 提交录入/编辑按钮
    submitForm(title, faultValidateForm) {
      const { faultType, faultDesc } = this.faultValidateForm
      const params = new URLSearchParams()
      const user = JSON.parse(getUrl('userconter'))
      this.$refs.faultValidateForm.validate(async (valid) => {
        if (valid) {
          if (title === '录入故障') {
            let she = ''
            this.addSheBeiName2.forEach((item) => {
              she = item.id
            })
            params.append('BZR_ID', user.id)
            params.append('SB_ID', she)
            params.append('GZLB', faultType[faultType.length - 1])
            params.append('GZMS', faultDesc)
            const { data: res } = await this.$http.post(`${yeWu}gz/insertGuZhang`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.offgou()
            this.getshuList()
          } else {
            if (typeof faultType !== 'number') {
              params.append('GZLB', faultType[faultType.length - 1] || '')
            } else {
              params.append('GZLB', faultType || '')
            }
            params.append('GZMS', faultDesc)
            params.append('ID', this.xiugaiId)
            const { data: res } = await this.$http.post(`${yeWu}gz/updateGuZhang`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.offgou()
            this.getshuList()
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
          return false
        }
      })
    },
    // 点击开启
    rowClick(row, column, event) {
      const a = this.gouXuanList.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        // 数组内存在时剔除
        this.gouXuanList.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
      } else if (this.checkboxT(row, null)) {
        this.gouXuanList.push(row)
        const s1 = new Set(this.gouXuanList)
        this.gouXuanList = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
      this.num = this.gouXuanList.length
    },
    // 远程控制
    yuanChenKZ(scope) {
      if (scope.ZCLXMC === '运维主机' && scope.ZCLX === 53) {
        // this.$router.push('/mainboard')
        localStorage.setItem('SN', scope.sbxlh)
        localStorage.setItem('password', scope.dlmm)
        localStorage.setItem('IP', scope.ip)
        localStorage.setItem('XQBM', scope.zcxqbm)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.zcmc)
        this.$router.push({ name: 'mainboaredit' })
      } else {
        window.open('http://' + scope.ip, '_blank')
      }
    },
    // ping
    showPingOk(scope) {
      this.ping.speedOpen = true
      this.ping.ip = scope.ip
      this.ping.name = scope.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.onSubmit(1, 10, e.type)
      this.xianQu = e.type
    },
    reload() {
      this.shuaxingTree = false
      this.$nextTick(() => (this.shuaxingTree = true))
    },
    panelOff(val) {
      this.refresh = val.type
    },
    // 打开详情
    xianqing(val) {
      console.log(val)
      if (val.gdbh) {
        this.jobDetails = {
          show: true,
          gdbh: val.gdbh,
          activeName: 'basicInfo',
        }
      } else {
        this.$message({
          type: 'error',
          message: '工单编码不正确!',
          center: true,
        })
      }
    },
    // 关闭详情
    details(val) {
      this.jobDetails = {
        show: val.type,
        gdbh: '',
        activeName: '',
      }
    },
    // 搜索工单派单
    ssGD() {
      const { organsVal, userName } = this.workOrderOptions
      this.paidUser.jgId = organsVal
      this.paidUser.zsxm = userName
      // 表格页数重置
      this.addCurrentPage2 = 1
      this.getYhPf()
    },
    // 生成工单
    async addpaidan() {
      clearTimeout(this.generatedTime)
      this.generatedLoad = true
      const { workOrderLevel } = this.workOrderOptions
      // const arr = []
      // this.gouXuanList.forEach(item => {
      //   arr.push(item.id)
      // })
      // const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      // params.append('user_id', user.id)
      params.append('jdid', this.paidUserId)
      params.append('djid', workOrderLevel)
      // params.append('ids', this.shengcgd)
      params.append('zcid', this.shengcgd)
      params.append('email', this.email) // 邮箱
      // const { data: res } = await this.$http.post(`${yeWu}gz/insertGD`, params)
      const { data: res } = await this.$http.post(`${yeWu}gz/enerateWorkOrder`, params)
      this.generatedLoad = false
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.getshuList()
      this.refresh = true
      this.dialogWorkOrder = false
      this.workOrderOptions = {
        workOrderLevel: 1,
        organsVal: '',
        userName: '',
      }
      this.shengcgd = []
      this.gouXuanList = []
      this.paidUserId = ''
      this.templateRadio = ''
    },
    getTemplateRow(index, row) {
      this.paidUserId = row.id
      this.templateRadio = row.id
      this.email = row.yx
    },
    getTemplateRow_addFault(row) {
      this.addSheBeiName2 = [row]
    },

    // 添加故障表格点击每一行事件
    addRowClick_addFault(row, column, event) {
      this.dispatchOptions = row.id
      this.addSheBeiName2 = [row]
    },
    // 批量删除
    async piLianDelete() {
      // const arr = []
      // this.gouXuanList.forEach(item => {
      //   arr.push(item.id)
      // })
      const params = new URLSearchParams()
      params.append('ids', this.deleteID)
      const { data: res } = await this.$http.post(`${yeWu}gz/deleteMoreGuZhang`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.getshuList()
      this.refresh = true
      this.gouXuanList = []
      this.deleteID = []
      this.dialogVisible = false
      this.$refs.multipleTable.clearSelection()
    },
    // 关闭批量删除
    deleteClose() {
      this.gouXuanList = []
      this.deleteID = []
      this.$refs.multipleTable.clearSelection()
      this.dialogVisible = false
    },
    // querySearch(queryString, cb) {
    //   var restaurants = this.restaurants
    //   var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // createFilter(queryString) {
    //   return restaurant => {
    //     if (restaurant.value) {
    //       return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    //     }
    //   }
    // },
    // handleSelect(val) {
    //   if (val) {
    //     this.searchSucces = true
    //     this.faultValidateForm.searchSuccesData = {
    //       faultTypeVal: val.zclxmc,
    //       JurisdictionVal: val.sfmc + val.csmc + val.qxmc + val.xzjdmc,
    //       IPadressVal: val.ip || val.value,
    //       portVal: val.gldk
    //     }
    //   }
    // },
    // clearAll() {
    //   if (this.searchSucces) {
    //     this.faultValidateForm.searchSuccesData = {
    //       faultTypeVal: '',
    //       JurisdictionVal: '',
    //       IPadressVal: '',
    //       portVal: ''
    //     }
    //     return (this.searchSucces = false)
    //   }
    // },
    // 搜索设备
    async searchShebei(type) {
      const { ss } = this.addShebei
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      params.append('ZCMC_IP_XH', ss)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
      console.log(res)
      if (res.code === '0013') {
        this.addTotal = 0
        return (this.addSheBeiName = [])
      }
      this.addSheBeiName = res.data.list
      this.addTotal = res.data.countList
      if (type === 'pre') {
        const { selected, selectedRow } = this.addFalutNextStatus
        console.log(this.addFalutNextStatus)
        this.dispatchOptions = selected
        this.addSheBeiName2 = selectedRow
      }
      // this.dispatchOptions = ''
      // this.addSheBeiName2 = []
    },
    // 添加设备
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.dispatchOptions = '' // 重置radio选中样式
      this.addSheBeiName2 = [] // 重置选中为空
      this.searchShebei()
    },
    // 生成工单
    addHandleCurrentChange2(val) {
      this.addCurrentPage2 = val
      this.getYhPf()
    },
    // 点击每一行事件
    addRowClick(row, column, event) {
      this.paidUserId = row.id
      this.templateRadio = row.id
      this.email = row.yx
    },
    // 获取资产名称
    getzcmc(row) {
      return row.zcmc
    },
    // 获取设备类型
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc3}</span>`
    },
    // 获取列表
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('userId', JSON.parse(getUrl('userconter')).id) // 当前用户ID
      // params.append('GZKZ', 'a') // 查询故障快照列表(随便传一个值)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('M_', this.currentPage) // 当前页
      params.append('N_', this.pageSize) // 每页显示行数
      params.append('zclx', this.searchCriteria.typeVal[this.searchCriteria.typeVal.length - 1] || '') // 资产类型ID
      params.append('zcmc', this.searchCriteria.namer) // 设备名称,IP条件
      switch (this.cityLevel) {
        case 1:
          params.append('SF', this.city)
          break
        case 2:
          params.append('CS', this.city)
          break
        case 3:
          params.append('QX', this.city)
          break
        case 4:
          params.append('XZJD', this.city)
          break
        default:
      }
      if (Array.isArray(this.searchCriteria.dataTime)) {
        params.append('BZSJS', this.searchCriteria.dataTime[0]) // 报障时间-开始时间
        params.append('BZSJE', this.searchCriteria.dataTime[1]) // 报障时间-结束时间
      }
      params.append('BZR_ID', this.searchCriteria.founder) // 创建人

      const { data: res } = await this.$http.post(yeWu + 'gz/selectGuZhangGroup', params)
      switch (res.code) {
        case '0000': // 操作成功
          this.tableData = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 排序
    sortthiscolumn(column) {
      // console.log(column)
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.initList()
    },
    // 问题数点击事件
    gzXiangqing(val) {
      this.countListData.contractDetailList = val
      this.countListData.contractDialogVisible = true
      this.countListData.xianqingID = val.id
      // this.huoquxiangqing()
    },
  },
}
</script>

<style lang="scss" scoped>
.addFaultPageRow {
  border: 0;
  padding: 0;
}
// 表格中单选需要加上
::v-deep .lineH0 {
  // .el-radio__input {
  //   line-height: 0;
  // }
  .el-radio__original {
    top: unset;
  }
}
.dialogTitle {
  font-size: 18px;
}
.dialogBox_next {
  .formbottm {
    &.el-form-item {
      margin-bottom: 10px;
    }
  }
}
.pR {
  position: relative;
}
// table 中raido选中会向上移动样式
::v-deep .lineH0 {
  .el-radio__original {
    top: unset;
  }
}
$c909399: #909399;
$c333333: #333333;
$bEAEAEA: #eaeaea;
$bEBEBEB: #ebebeb;
.imgIcon {
  width: 14px;
  height: 14px;
}
.tree-box {
  float: none;
  position: fixed;
  height: 100%;
  padding-bottom: 93px;
  border-right: 1px solid #eaeaea;
  padding-top: 0;
  > div {
    > span {
      padding: 15px 0 10px;
      display: inline-block;
    }
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    // scrollbar-color: transparent transparent;
    // overflow-y: auto;
    // scrollbar-arrow-color: #f0f2f5; /* 设置滚动条上的箭头颜色  */
    // scrollbar-base-color: #f0f2f5; /* 设置滚动条的底色 */
    // scrollbar-track-color: #f0f2f5; /* 设置滚动条块的背景色 */
    // scrollbar-shadow-color: #f0f2f5; /* 设置箭头和滚动条右侧和底边的颜色 */
    .tree_box {
      margin-top: 0;
    }
  }
}
::-webkit-scrollbar {
  /* 滚动条宽 */
  width: 6px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  /* 滚动条 拖动条 */
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 滚动条背景槽 */
  background-color: #eee;
  border-radius: 6px;
}
.el-cascader {
  width: 205px !important;
}
.xiaoshou {
  cursor: pointer;
}
.workOrderClass {
  // width: 900px;
  .header-title {
    .title {
      font-size: 16px;
      color: $c333333;
      padding-right: 15px;
    }
    .title-count {
      color: $c909399;
      font-size: 14px;
    }
  }
  .el-input-group__append {
    width: 40px;
    line-height: 30px;
    text-align: center;
  }
  .el-table {
    border: 1px solid $bEAEAEA;
  }
}
::v-deep .workOrderClass {
  .el-input-group__append {
    background-color: #f5f7fa !important;
  }
}
.usersNumber {
  cursor: pointer;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  position: relative;
}
.usersNumber:after {
  content: '...';
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10%;
  height: 1.8em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
</style>
<style lang="scss">
// $c333333: #333333;
// $bE8E8E8: #e8e8e8;
// $c909399: #909399;
// // 录入故障弹出界面样式
// .el-drawer {
//   .addUer_title {
//     display: flex;
//     justify-content: space-between;
//     padding: 0 20px;
//     height: 61px;
//     line-height: 61px;
//     border-bottom: 1px solid #ededed;
//     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
//     > span {
//       font-size: 18px;
//       font-weight: 600;
//     }
//     .addUer_icon {
//       font-size: 20px;
//       font-weight: 700;
//       display: flex;
//       flex-flow: column;
//       justify-content: center;
//       cursor: pointer;
//     }
//   }
//   .el-row {
//     margin-top: 30px;
//     .bg_title {
//       height: 46px;
//       line-height: 46px;
//       text-align: center;
//       background: rgba(245, 247, 250, 1);
//       > span {
//         color: rgba(121, 122, 123, 1);
//       }
//     }
//     .title_from {
//       padding: 0;
//       margin-bottom: 10px;
//     }
//   }
//   .forms_fooer {
//     position: absolute;
//     bottom: 0;
//     width: 100%;
//     display: flex;
//     justify-content: flex-end;
//     padding: 0 20px;
//     box-sizing: border-box;
//     align-items: center;
//     height: 61px;
//     line-height: 61px;
//     border-top: 1px solid #ededed;
//     .users_btn {
//       padding: 0 10px;
//       height: 36px;
//     }
//   }
// }
// .addSheBei {
//   > li:first-child {
//     margin-left: 0;
//   }
//   > li {
//     height: 35px;
//     line-height: 35px;
//     float: left;
//     margin-left: 10px;
//     .selectItem3 {
//       width: 330px;
//     }
//     .addShebSearch {
//       margin-left: 10px;
//     }
//   }
//   .select2 {
//     > span {
//       font-weight: 600;
//       margin-right: 5px;
//     }
//     .selectItem2 {
//       width: 200px;
//       line-height: 0;
//     }
//   }
// }
// // 去掉默认的边框
// :focus {
//   outline: none;
// }
// .workOrderClass {
//   .el-dialog__header {
//     padding: 20px 20px 0px;
//   }
//   .el-form-item__label {
//     font-weight: 400 !important;
//   }
//   // .el-dialog__body {
//   //   padding: 27px 20px 5px;
//   // }
// }
// .workOrderClass {
//   .el-input-group__append {
//     width: 40px;
//     line-height: 30px;
//     text-align: center;
//   }
//   .el-form-item {
//     &:nth-child(2) {
//       margin-bottom: 10px;
//       color: $c909399;
//     }
//   }
//   .el-input {
//     width: 260px;
//     // &:nth-child(1) {
//     //   // margin-right: 15px;
//     // }
//   }
//   .el-table th,
//   .el-table td {
//     div {
//       font-size: 14px;
//     }
//   }
//   .el-table th {
//     div {
//       font-weight: 600;
//     }
//   }
// }
// .footerPagination {
//   display: flex;
//   justify-content: space-between;
// }
// .formbottm {
//   padding: 0;
//   margin-bottom: 10px !important;
// }
</style>
